<template>
	<view style="width: 100%; position: fixed;  top: 0; z-index: 9;" :style="{ height: navbarHeight + 'px', backgroundColor: propos.backgroundColor }">
		<view class="backgroundColor" :style="{height:TimeBarHeight + 'px'}" ></view>
		<view class="headerbar" :style="[dataProposStlye, { height: capsuleHeight + 'px', top: TimeBarHeight + 'px' }]">
		  <view class="backround">
		    <image
		      v-if="!username"
		      class="imageicon left"
		      :src="lefticon"
		      mode="widthFix"
		      @click="isgoback"
		    ></image>
		    <view class="userbaoxall" v-if="username">
		      <image class="imageicon left" :src="lefticon" mode="" @click="isgoback"></image>
		      <image class="iamgeUser" :src="userimage" mode=""></image>
		      <view class="UserIndex">{{ username }}</view>
			  <view class="" v-if="!isMySelf">
			  	<view class="guanzhubutton" @click="handleConcern " v-if="!isFollow">
			  	  关注
			  	</view>
			  	<view class="yiguanzhubutton" @click="handleConcern " v-else> 已关注 </view>
			  </view>
		     
		    </view>
		    <view class="wrodtitle">{{ wordtitle }}</view>
		    <image
		      class="imageicon rigth"
		      :src="rightticon"
		      mode=""
		      @click="leftButton"
		    ></image>
		  </view>
		</view>
	</view>
</template>

<script setup>
import { onMounted, ref, computed, watch } from "vue";
import { TimeBarHeight, capsuleHeight, navbarHeight } from '@/config/systemInfo.js'
const propos = defineProps({
  userimage: {
    type: String,
    default: "",
  },
  isMySelf:{
	  type:Boolean,
	  default:false
  },
  username: {
    type: String,
    default: "",
  },
  wordtitle: {
    type: String,
    default: "",
  },
  lefticon: {
    type: String,
    default: "https://file.whshiyuan.cn:9000/toopu/compressed/6301729060237_compressed_img.png",
  },
  rightticon: {
    type: String,
    default: "",
  },
  backgroundColor: {
    type: String,
    default: "",
  },
  navBarWith: {
    type: String,
    default: "100vw", // 默认宽度
  },
  navBarHeight: {
    // 注意这里的命名更改为标准的驼峰式命名法
    type: String,
    default: '', // 默认高度
  },
  navBarBottum: {
    //离头部高度
    type: String,
    default: '',
  },
  ispanding: {
    type: String,
    default: "",
  },

  gateToPageFunction: {
    type: Boolean,
    default: true,
  },
  fixHeader: {
    type: Boolean,
    default: true,
  },
  isFollow: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(["leftButtonClick", "leftIsConcern"]);

const leftButton = () => {
  //自定义右按钮点击事件
  emits("leftButtonClick");
};
const handleConcern = () => {
  emits("leftIsConcern", !propos.isFollow); // 将新的关注状态传递给父组件处理
};
// 传递跳转的页面
const isgoback = () => {
	uni.removeStorageSync('groupstData'); 
	uni.removeStorageSync('groupName')
  if (propos.ispanding) {
    // 判断是直接跳转还是销毁跳转
    uni[propos.gateToPageFunction ? "navigateTo" : "reLaunch"]({
      url: propos.ispanding,
    });
  } else {
    uni.navigateBack({
      delta: 1,
    });
  }
};

// 使用 computed 计算样式
const fixPage = ref(propos.fixHeader ? "fixed" : "absolute");
const dataProposStlye = computed(() => ({
  "background-color": propos.backgroundColor,
  width: propos.navBarWith,
  height: propos.navBarHeight,
  position: fixPage.value,
  top: propos.navBarBottum,
}));
watch(
  () => propos.isFollow,
  (newVal) => {
    console.log("关注状态更新为:", newVal);
  }
);
// 确保在 mounted 钩子中不会改变初始状态
onMounted(() => {
  console.log("isFollow", propos.isFollow);
  // 如果需要在 mounted 钩子中更改样式，可以在这里做
});
</script>

<style scoped>
.backgroundColor {
  top: 0;
  z-index: 9;
  position: fixed;
  width: 100vw;
}
.rigth {
  width: 48rpx;
  height: 48rpx;
  position: relative;
  right: 25vw;
}
.UserIndex {
	margin-left: 10rpx;
  text-overflow: ellipsis; /* 当内容溢出时显示省略号 */
  white-space: nowrap; /* 不换行 */
  font-size: 14px;
  font-weight: bold;
  color: #333333;
}
.left {
  width: 40rpx;
  height: 40rpx;
}
.guanzhubutton {
	margin-left: 10rpx;
  width: 90rpx;
  height: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 114rpx;
  font-size: 14px;
  border: 1px solid rgb(143, 128, 240);
  color: rgb(143, 128, 240);
}
.yiguanzhubutton {
	margin-left: 10rpx;
  width: 90rpx;
  height: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 114rpx;
  font-size: 13px;
  border: 1px solid rgba(0, 19, 76, 0.3);
  color: rgba(0, 19, 76, 0.3);
}
.iamgeUser {
	margin-left: 10rpx;
  border-radius: 50%;
  width: 48rpx;
  height: 48rpx;
}
.userbaoxall {
  display: flex;
  align-items: center;
}
.username {
  display: flex;
}
.imageicon {
  z-index: 999;
  display: flex;
}
.backround {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  height: 100%;
}
.headerbar {
  z-index: 9;

  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
